<template>
  <div>
    <header class="bg-gray-100 shadow">
      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900">{{ $route.meta.title }}</h1>
      </div>
    </header>
    <main>
      <div class="max-w-7xl mx-auto py-3 sm:px-6 lg:px-8">
        <!-- Replace with your content -->
        <div class="px-4 py-2 sm:px-0">
          <!--    page_content      -->
          <el-card>
            <template #header>
              <div>
                <span>修改密码</span>
              </div>
            </template>
            <el-form :model="form" label-width="120px">
              <el-form-item label="旧密码">
                <el-input type="password" show-password v-model="form.oldPassword" placeholder="请输入现在的密码"/>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input type="password" show-password v-model="form.newPassword" placeholder="请请输入新密码"/>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input type="password" show-password v-model="form.conPassword" placeholder="请再次输入密码"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">更新</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <!-- /End replace -->
      </div>
    </main>
  </div>
</template>

<script>
import request from "@/http/request";

export default {
  name: 'UpdatePassword',
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        conPassword: ''
      }
    }
  },
  methods: {
    onSubmit() {
      //判断都不为空
      if (this.form.oldPassword === '' || this.form.newPassword === '' || this.form.conPassword === '') {
        this.$message.error('请保证各项不为空');
        return
      }
      if (this.form.newPassword !== this.form.conPassword) {
        this.$message.error('两次输入的密码不一致！')
        return
      }

      //发送请求
      request.updatePassword(this.form).then(res => {
        if (res.data.status === 200) {
          this.$store.commit('token', null)
          this.$message.success('修改密码成功！请重新登陆')
          this.$router.push({name: 'Login'})
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>